import {Component, Ref} from "react";
import {Data, State} from "./types.tsx";
import {Button, Col, Collapse, Form, FormInstance, Input, message, Row, Spin} from "antd";
import LazyIcon from "../../../components/Tools/Icon";

import {URL, send} from "../../../utils/http.util.tsx";
import {Handler} from "../../../utils/util.tsx";
import * as React from "react";

const {Panel} = Collapse;


class Questionnaire extends Component<any, State> {

    state = {
        loading: false,
        configList: [],
        formRefs: []
    }

    componentDidMount() {
        send(URL.questionnaireConfigList).then(resp => {
            const respData = resp.data;
            const httpCode = respData.httpCode
            if (httpCode === 200) {
                const data = respData.data;
                this.setState({configList: data, formRefs: data.map(() => React.createRef<FormInstance>())})
            } else Handler.ofHttpWarn(httpCode)
        }).catch(err => Handler.ofError(err))
    }

    handleApplyConfig(id: string) {
        this.setState({loading: true}, () => {
            const formRef: Ref<FormInstance> = this.state.formRefs[Number(id)];
            // @ts-ignore
            formRef.current.validateFields().then(values => {
                values.id = id
                send(URL.questionnaireConfigUpdate, values).then(resp => {
                    if (resp.data.httpCode === 200) {
                        message.success('操作成功').then(() => this.setState({loading: false}))
                    } else Handler.ofError(resp.data.httpCode)
                }).catch(Handler.ofError)
            }).catch((info: any) => console.log('校验失败:', info));
        })
    }

    render() {
        const configList: Data[] = this.state.configList;
        const formRefs: Ref<FormInstance>[] = this.state.formRefs;
        const loading = this.state.loading;

        return (
            <>
                <Row gutter={24}>
                    <Col span={24}>
                        <Collapse accordion bordered={false} defaultActiveKey={['1']} expandIconPosition={"start"}>
                            {
                                configList.map(config => {
                                    return (
                                        <>
                                            <Panel header={config.nodeName} key={config.id} extra={""}>
                                                <div style={{paddingLeft: '24px'}}>
                                                    <Form ref={formRefs[Number(config.id)]} layout={"vertical"} initialValues={{
                                                        question: config.question, questionPrompt: config.questionPrompt, imgPrompt: config.imgPrompt, riskPrompt: config.riskPrompt,
                                                        suffixContent: config.suffixContent, prefixContent: config.prefixContent,
                                                    }}>
                                                        <Spin spinning={loading}>
                                                            <Row gutter={24}>
                                                                <Col span={16}>
                                                                    <Form.Item name={"question"} rules={[{required: true, message: "当前问题不能为空"}]}>
                                                                        <Input/>
                                                                    </Form.Item>
                                                                </Col>
                                                                <Col span={8}>
                                                                    <Button block icon={<LazyIcon iconName="Check"/>} type="primary" onClick={() => this.handleApplyConfig(config.id)}>应用配置</Button>
                                                                </Col>
                                                            </Row>
                                                            <Row gutter={24}>
                                                                <Col span={12}>
                                                                    <Form.Item name={"questionPrompt"} label={"当前问题的提示词"}>
                                                                        <Input/>
                                                                    </Form.Item>
                                                                </Col>
                                                                <Col span={12}>
                                                                    <Form.Item name={"imgPrompt"} label={"生图的提示词"}>
                                                                        <Input/>
                                                                    </Form.Item>
                                                                </Col>
                                                            </Row>
                                                            <Row gutter={24}>
                                                                <Col span={24}>
                                                                    <Form.Item name={"riskPrompt"} label={"风险提示的提示词"}>
                                                                        <Input/>
                                                                    </Form.Item>
                                                                </Col>
                                                            </Row>
                                                            <Row gutter={24}>
                                                                <Col span={12}>
                                                                    <Form.Item name={"prefixContent"} label={"当前问题的前缀内容"}>
                                                                        <Input.TextArea allowClear showCount/>
                                                                    </Form.Item>
                                                                </Col>
                                                                <Col span={12}>
                                                                    <Form.Item name={"suffixContent"} label={"当前问题的后缀内容"}>
                                                                        <Input.TextArea allowClear showCount/>
                                                                    </Form.Item>
                                                                </Col>
                                                            </Row>
                                                        </Spin>
                                                    </Form>
                                                </div>
                                            </Panel>
                                        </>
                                    )
                                })
                            }
                        </Collapse>
                    </Col>
                </Row>
            </>
        )
    }
}

export default Questionnaire;
